<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .da{
            background-color: rgb(255, 255, 255);
           width:auto ;
           height: 1000px;
           padding: 30px  30px 0px 30px ;
           margin: auto;
           border: 1px solid red;
           display: flex;
           flex-wrap: wrap;
        }
        .first{
            background-color: brown;
            width: 100px;
            height: 100px;
           transform: rotate(20deg);
           
        }
        .firsts{
            background-color: red;
            width: 100px;
            height: 100px;
            margin-left: 100px;
           transform: rotate(-20deg);
           

        }
        .second{
            background-color: rgb(73, 9, 9);
            width: 100px;
            height: 100px;
            transform: translate(50px,100px);
            margin-left: 50px;
        }
        .third{
            background-color: rgb(109, 16, 16);
            width: 100px;
            height: 100px;
            transform: scale(2,1);
            margin-left: 120px;
        }
        .fourth{
            background-color: darkorange;
            width: 100px;
            height: 100px;
            transform: scale(0.5, 0.5);
            margin-left: 100px;
        }
        .fifth{
            background-color: antiquewhite;
            width: 100px;
            height: 100px;
            transform: scale(1,2);
            margin-left: 100px;
        }
        .sixth{
            background-color: cadetblue;
            width: 100px;
            height: 100px;
            transform: scalex(2);
            margin-left: 100px;
        }
        .seveth{
            background-color: coral;
            width: 100px;
            height: 100px;
            transform: scaleY(2);
            margin-left: 100px;
        }
        .eihgth{
            background-color: darkblue;
            width: 100px;
            height: 100px;
            transform: scaleX(0.5);
        }
        .neith{
            background-color: yellow;
            width: 100px;
            height: 100px;
            transform:skewX(20deg);
        }
        .ten{
            background-color: fuchsia;
            width: 100px;
            height: 100px;
            transform: skewY(20deg);
            margin-left: 100px;
        }
        .tena{
            background-color: lightcoral;
            width: 100px;
            height: 100px;
            transform: skew(20deg,20deg);
            margin-left:  100px;
        }
        .tenb{
            background-color: salmon;
            width: 100px;
            height: 100px;
            transform: skew(20deg);
            margin-left: 100px;
        }
        .tenc{
            background-color: saddlebrown;
            width: 100px;
            height: 100px;
            transform: matrix(1,-0.3,0,1,0,1);
            margin-left :100px; 
        }



    </style>
</head>
<body>
    <div class="da">
    <div class="first"></div>
    <div class="firsts"></div>
    <div class="second"></div>
    <div class="third"></div>
    <div class="fourth"></div>
    <div class="fifth"></div>
    <div class="sixth"></div>
    <div class="seveth"></div>
    <div class="eihgth"></div>
    <div class="neith"></div>
    <div class="ten"></div>
    <div class="tena"></div>
    <div class="tenb"></div>
    <div class="tenc"></div>
</div>
</body>
</html>